<template>
    <el-collapse-item name="2">
        <template #title>
            <h2> 功能 配置 </h2>
        </template>
        <el-descriptions :column="1" border>
            <ElDescriptionsItem v-for="(item, key) in function_configs" :key="key.toUpperCase()">
                <template #label>
                    <div class="function_config_label">
                        {{ key.toUpperCase() }}
                        <span v-if='item.label'>{{ item.label }}</span>
                        <el-tooltip placement="left" :content="item.enable ? '点击关闭' : '点击开启'">
                            <el-button circle size='small' :type="item.enable ? 'success' : 'info'"
                                @click="item.enable = !item.enable" />
                        </el-tooltip>
                    </div>
                </template>
                <div v-if='item.enable' v-for="(data, label) in item.config" :key="key + '-' + label"
                    style="display: flex;align-items: center; margin-bottom: 10px">
                    <el-tag type='success' size="large">
                        {{ label }}
                    </el-tag>
                    <el-input v-model="item.config[label]" clearable />
                </div>
                <el-text v-else type="info">未开启功能</el-text>
            </ElDescriptionsItem>
        </el-descriptions>
        <el-button :disabled="!config_change" @click="save" type="primary" style="margin-top: 10px;">保存</el-button>
    </el-collapse-item>
</template>

<script setup lang="ts">
import { cloneDeep, isEqual } from "lodash-es"
import Bus from "~/utils/bus";
const props = defineProps({
    function_config: {
        type: Object,
        default: {}
    },
})
const config_change = ref(false)
const source_configs = cloneDeep(props.function_config)
const function_configs = ref(props.function_config)
watchEffect(() => {
    for (let key in function_configs.value) {
        if (source_configs[key].config && !isEqual(source_configs[key].config, function_configs.value[key].config)) {
            config_change.value = true
            return
        }
    }
    config_change.value = false
})
const save = () => {
    if (config_change.value)
        Bus.emit('push.msg', { api: "set_config_function", data: function_configs.value })
    config_change.value = false
}
</script>

<style scoped>
.function_config_label {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.el-tag {
    margin-right: 10px;
    min-width: 60px;
    font-size: 1em;
}
</style>